<template>
  <div
    class="selector-box f f-ac-c"
    :style="{
      top: top + 'px',
      left: left + 'px',
      right: right + 'px',
      bottom: bottom + 'px',
      zIndex: zIndex,
    }"
  >
    <div
      v-for="(i, index) in list"
      :key="index"
      class="selector-item"
      :class="{
        active: isString ? index === currentValue : i[keyValue] === currentValue,
      }"
      :style="{
        minWidth: width == 'auto' ? width : width + 'px',
      }"
      @click="handleCheck(index)"
    >
      {{ isString ? i : i[keyName] }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    // 选项
    list: {
      type: Array,
      default: () => ["总体", "月", "周", "日"],
    },
    // 当前选择下标
    current: {
      type: [Number, String],
      default: 0,
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 56,
    },
    // 距离顶部
    top: {
      type: [String, Number, null],
      default: null,
    },
    // 距离底部
    bottom: {
      type: [String, Number, null],
      default: null,
    },
    // 距离左边
    left: {
      type: [String, Number, null],
      default: null,
    },
    // 距离右边
    right: {
      type: [String, Number, null],
      default: null,
    },
    // 层级
    zIndex: {
      type: [Number, String],
      default: 1,
    },
    // 显示字段
    keyName: {
      type: String,
      default: "label",
    },
    // 取值字段
    keyValue: {
      type: String,
      default: "value",
    },
  },
  data() {
    return {
      isString: true,
      currentValue: null,
    };
  },
  watch: {
    current: {
      handler(val) {
        this.currentValue = val;
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.list && typeof this.list[0] === "object") {
      this.isString = false;
    } else {
      this.isString = true;
    }
    this.currentValue = this.current;
  },
  methods: {
    // 点击选择
    handleCheck(index) {
      this.$emit("change", {
        ...this.list[index],
        index,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.selector-box {
  position: absolute;
  .selector-item {
    height: 30px;
    text-align: center;
    line-height: 30px;
    padding: 0 13px;
    box-sizing: border-box;
    border-radius: 20px;
    font-size: 12px;
    color: #3fdff6;
    border: 1px solid #3fdff6;
    margin-right: 9px;
    &:hover {
      cursor: pointer;
      background-color: rgba(63, 216, 246, 0.5);
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .active {
    color: #fff;
    background-color: #3fd7f6;
  }
}
</style>
